<template>
  <el-form :model="tableInfo" ref="tableForm" style="width: 100%">
    <!-- 组件部件  名称和数量必填 但是可以一条都不添加-->
    <page-table
      v-model:data="tableInfo.data"
      :pager="false"
      :check-box="false"
      :tab-index="true"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
    >
      <template v-slot:col-resourceName="scope">
        <el-form-item
          style="min-width: 100% !important"
          v-if="!disabeld"
          :prop="`data.${scope.$index}.resourceName`"
          :rules="
            scope.$index >= 0 && [
              {
                required: scope.row.qty && scope.row.qty > 0 ? true : false,
                message: '请输入名称',
                trigger: 'blur',
              },
            ]
          "
        >
          <el-input
            style="width: 100%"
            v-model.lazy="scope.row.resourceName"
            :maxlength="200"
            clearable
          />
        </el-form-item>
        <span v-else>{{ scope.row.resourceName }}</span>
      </template>
      <template v-slot:col-qty="scope">
        <el-form-item
          style="min-width: 100% !important"
          v-if="!disabeld"
          :prop="`data.${scope.$index}.qty`"
          :rules="
            scope.$index >= 0 && [
              {
                required: scope.row.resourceName ? true : false,
                message: '请输入数量',
                trigger: 'blur',
              },
            ]
          "
        >
          <el-input-number
            style="width: 100%"
            v-model.lazy="scope.row.qty"
            clearable
            controls-position="right"
            :precision="0"
            :min="1"
            :max="999999999999999"
          />
        </el-form-item>
        <span v-else>{{ scope.row.qty }}</span>
      </template>
    </page-table>
  </el-form>
</template>

<script setup name="associatedSubcard">
const { proxy } = getCurrentInstance()
const props = defineProps({
  assetResourceVOList: {
    type: Array,
    default: () => {
      return []
    },
  },
  disabeld: {
    type: Boolean,
    default: false,
  },
  isEmpty: {
    //详情数控为空时显示空
    type: Boolean,
    default: false,
  },
})
const tableInfo = ref({
  data: [
    {
      resourceName: '',
      machineCode: '',
      standard: '',
      brandName: '',
      qty: undefined,
    },
  ],
  fieldList: [
    {
      label: '组件名称',
      value: 'resourceName',
      type: 'slot',
    },
    {
      label: 'SN码',
      value: 'machineCode',
      disabled: props.disabeld,
      type: props.disabeld ? '' : 'input',
      maxlength: 32,
    },
    {
      label: '规格',
      value: 'standard',
      disabled: props.disabeld,
      type: props.disabeld ? '' : 'input',
    },
    {
      label: '厂家',
      value: 'brandName',
      disabled: props.disabeld,
      type: props.disabeld ? '' : 'input',
    },
    {
      label: '数量',
      value: 'qty',
      type: 'slot',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '新增行',
        event: addSource,
        show: true,
        ifRender: () => {
          return !props.disabeld
        },
      },
      {
        label: '删除',
        event: removeSource,
        show: true,
        ifRender: () => {
          return tableInfo.value.data.length > 1 && !props.disabeld
        },
      },
    ],
  },
})
watch(
  () => props.assetResourceVOList,
  (val) => {
    if (val.length) {
      tableInfo.value.data = proxy.$fn.deepClone(val)
    } else {
      if (props.isEmpty) {
        tableInfo.value.data = []
      } else {
        tableInfo.value.data = [
          {
            resourceName: '',
            machineCode: '',
            standard: '',
            brandName: '',
            qty: undefined,
          },
        ]
      }
    }
  },
  { deep: true, immediate: true }
)
function addSource() {
  //增加部件
  tableInfo.value.data.push({
    resourceName: '',
    machineCode: '',
    standard: '',
    brandName: '',
    qty: undefined,
  })
}
function removeSource(row) {
  //删除部件
  tableInfo.value.data = tableInfo.value.data.filter((item) => item !== row)
}

function getAssociatedSubcardForm() {
  let assetResourceVOList = []
  let status = true
  proxy.$refs['tableForm'].validate()
  let validateList = tableInfo.value.data.filter(
    (item) =>
      (item.resourceName && !item.qty) ||
      (item.qty && !item.resourceName) ||
      ((item.machineCode || item.standard || item.brandName) &&
        (!item.resourceName || !item.qty))
  )
  if (validateList.length) {
    proxy.$message({
      message: '存在未填写完整的组件/部件，请检查！',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    status = false
  }
  assetResourceVOList = tableInfo.value.data.filter(
    (item) => item.resourceName && item.qty > 0
  )

  return {
    assetResourceVOList: assetResourceVOList,
    status: status,
  }
}
defineExpose({
  getAssociatedSubcardForm,
})
</script>
